<div *ngIf="flag==1">
  <div class="table-operations">
    <button nz-button [nzType]="'primary'" (click)="showModal()"><i nz-icon nzType="usergroup-add" nzTheme="outline"></i>添加班级</button>
    <button nz-button [nzType]="'primary'" (click)="showModal2()"><i nz-icon nzType="user-add" nzTheme="outline"></i>添加学生</button>
    <button nz-button [nzType]="'primary'" (click)="backTable()"><i nz-icon nzType="rollback" nzTheme="outline"></i>返回</button>
  </div>
  <!-- table信息展示 -->
  <nz-table #filterTable [nzData]="listOfData" nzTableLayout="fixed" nzTitle="学生信息表" >
    <thead>
      <!--    姓名-->
      <tr>
        <th *ngFor="let column of listOfColumns; " >
          {{ column.name }}
        </th>
        <!--      班级-->
        <th *ngFor="let column of listOfColumns"
          [nzFilters]="column.listOfFilter" [nzFilterFn]="column.filterFn">
          {{ column.grade }}
        </th>
        <!--      学号-->
        <th *ngFor="let column of listOfColumns"
        >
          {{ column.id }}
        </th>
        <!--      性别-->
        <th *ngFor="let column of listOfColumns; "
            >
          {{ column.gender }}
        </th>
        <!--      邮箱-->
        <th *ngFor="let column of listOfColumns; ">
          {{ column.email }}
        </th>
        <!--      电话-->
        <th *ngFor="let column of listOfColumns; ">
          {{ column.mobile }}
        </th>
        <th></th>

      </tr>
    </thead>
    <tbody>
      <!-- 表身部分 -->
      <ng-container *ngFor="let data of filterTable.data ">
        <tr *ngFor="let student of data.student ">
          <td>{{ student.name }}</td>
          <td>{{ data.grade }}</td>
          <td>{{ student.id }}</td>
          <td>{{ student.gender }}</td>
          <td>{{ student.email }}</td>
          <td>{{ student.mobile}}</td>
          <td>
            <a class="delete" (click)="delInfo(data.grade,student)"><i nz-icon nzType="user-delete" nzTheme="outline"></i>删除</a>
            <a class="delete" (click)="editInfo(data.grade,student)"><i nz-icon nzType="edit" nzTheme="outline"></i>编辑</a></td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>

</div>



<!-- 添加班级 -->
<!--nz-icon nzIconType="user-add" nzTheme="outline"-->
<div *ngIf="flag==2">
  <nz-modal [(nzVisible)]="isVisible" nzTitle="添加班级" (nzOnCancel)="backTable()" (nzOnOk)="handleOk()" >
    <ng-container *nzModalContent>
      <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="grade">班级</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入新添加的班级!">
            <input nz-input formControlName="grade" id="grade" />
          </nz-form-control>
        </nz-form-item>
      </form>
    </ng-container>
  </nz-modal>
</div>


<!-- 添加学生 -->
<div *ngIf="flag==3">
  <nz-modal [(nzVisible)]="isVisible" nzTitle="添加学生" (nzOnCancel)="backTable()" (nzOnOk)="handleOk2()">
    <ng-container *nzModalContent>
      <form nz-form [formGroup]="validateForm2" (ngSubmit)="submitForm2()">
        <!-- 姓名 -->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired nzTooltipTitle="请输入学生姓名">
            <span>姓名</span>
          </nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="学生姓名有误!">
            <input nz-input id="name" formControlName="name" />
          </nz-form-control>
        </nz-form-item>

        <!-- 学号 -->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="id" nzRequired nzTooltipTitle="请输入学生学号">
            <span>学号</span>
          </nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="100" nzErrorTip="学生学号有误!">
            <input nz-input id="id" formControlName="id" />
          </nz-form-control>
        </nz-form-item>

        <!-- 班级信息 -->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="grade">班级</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入新添加的班级!">
            <!-- <nz-select ngModel="gradeList" nzAllowClear nzPlaceHolder="选择" ng-options="item.value as item.name for item in [1,2,3]">
             <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
            </nz-select> -->
            <nz-select value="男" nzShowSearch nzAllowClear id="class" formControlName="class" formControlName="grade">
              <nz-option *ngFor="let item of gradeList" nzLabel={{item}} nzValue={{item}}>
              </nz-option>
            </nz-select>

          </nz-form-control>
        </nz-form-item>


        <!-- 性别信息 -->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="gender">性别</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入学生性别!">
            <nz-radio-group formControlName="gender">
              <label nz-radio nzValue="男">男</label>
              <label nz-radio nzValue="女">女</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <!-- 邮箱 -->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">邮箱</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="输入的邮箱地址无效!">
            <input nz-input formControlName="email" id="email" />
          </nz-form-control>
        </nz-form-item>

        <!-- 电话号码 -->
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="mobile" nzRequired nzTooltipTitle="请输入学生电话">
            <span>电话</span>
          </nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="学生电话有误!">
            <input nz-input id="mobile" formControlName="mobile" />
          </nz-form-control>
        </nz-form-item>

      </form>
    </ng-container>
  </nz-modal>
</div>


